<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title></title>
		<!-- jquery引入，必须放到第一位  -->
		<script type="text/javascript" src="ajax_files/jquery.js"></script>
		<script type="text/javascript" src="ajax_files/new_file.js"></script>
		<style>
			body {
				width: 100%;
			}
			
			.wapper {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background: url(img/background.jpg) no-repeat;
				background-size: 100% 100%;
			}
			
			.choice {
				position: relative;
				height: 50%;
				width: 80%;
				margin: 10% auto;
				background: rgba(0, 0, 0, 0.5);
			}
			.aa{
				color: #fff;
			}
		</style>
		<script>
			var a=10;	
			
			
		</script>
	</head>
	<body>
		<div class="wapper">
			<div class="choice" id="box" style="width: 200px;">
				<input id="user_name" value="lily" type="text">
				<button id="btn">查看</button>
				
				<div class="aa">111111</div>
				<div class="aa">222222</div>
				<div class="aa">333333</div>
				<div class="aa">444444</div>
				<div class="aa">555555</div>
				<div class="aa">666666</div>
				<div class="aa">777777</div>

			</div>
		</div>
	


<script>
	/*window.onload=function(){
							1 onload: 所有的资源加载完
							
						}*/

	$(document).ready(function() {
		//1 ready : 所有的标签加载完

		function page_init() {

			$("#user_name").val("lily")
			page_set();
		}

		$("#btn").on("click", function(event) {
			/*var inputVal=$("#user_name").val()
			alert(inputVal);*/
			$("#user_name").val("Mary10");
			
			var arr=[10,20,30]
			
			$(".aa").each(function(index,item){
				console.log($(item).html((index*100)));
			});
			
		});

		$("#user_name").on("focus",function(){
			console.log("focus    user_name changed");	
		});
		
		/*$(".aa").on("click",function(){
			//1 on未来元素/新增元素	
			
		})*/
		function page_set() {
			var win_widt = $(window).width();
			var win_heig = $(window).height();

			var boxWidth = $("#box").width();

			$("#box").css({
				width: 200
			});
			console.log("window's width = " + win_widt + "   window's height = " + win_heig);
			console.log("box width = " + boxWidth);
		}

		$(window).resize(function() {
			console.log("window is change")
			page_set();
		});

		page_init();
	});
</script></body></html>